<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>在线客服系统，欢迎您!</title>
</head>

<body>
<input type="hidden" th:value="${userId}" id="userId"/>

消息：<input id="sendMsg" type="text" />
<button onclick="send()">发送消息</button>
<hr/>
<div id="msg"></div>
</body>
<script type="text/javascript">
    // 用户Id，服务端地址
    var userId = document.getElementById("userId").value;
    var ws_address = "ws://localhost:8888/kf/" + userId;

    var kf = {};

    // 检查浏览器是否支持webSocket
    if('WebSocket' in window) {
        // 创建webSocket对象
        kf.wSocket = new WebSocket(ws_address);
    } else {
        alert('抱歉，您的浏览器不支持webSocket!')
    }

    // 回调方法：连接成功
    kf.wSocket.onopen = function (ev) {
        document.getElementById('msg').innerHTML +=  '与服务端连接成功!<br/>';
    }

    // 回调方法：连接失败
    kf.wSocket.onerror = function (ev) {
        document.getElementById('msg').innerHTML +=  '与服务端连接失败!<br/>';
    }

    // 回调方法：收到消息
    kf.wSocket.onmessage = function (ev) {
        document.getElementById('msg').innerHTML +=  ev.data + '<br/>';
    }

    // 回调方法：关闭连接
    kf.wSocket.onclose = function (ev) {
        document.getElementById('msg').innerHTML +=  '与服务端连接关闭!<br/>';
    }

    // 监听窗口关闭事件，当窗口关闭时，主动去关闭webSocket连接
    // 防止连接还没断开就关闭窗口，server端发生异常
    window.onbeforeunload = function() {
        kf.wSocket.close();
    }

    // 发送消息
    function send(){
        var message = document.getElementById('sendMsg').value;
        kf.wSocket.send(message);
    }

</script>

</html>
